import React, { Component } from 'react';
import {StyleSheet,Text,View,Image, ScrollView} from 'react-native';
import { red } from 'ansi-colors';

export default class NewsInfo extends Component{
  static navigationOptions = {
    title: '新闻详情',
  };

  constructor(props){
    super(props);
    this.state = {
      newsinfo: {},
      id: this.props.navigation.state.params.id
    }
  }

  componentWillMount(){
    this.getNewsInfo(this.state.id)
  }

  render(){
    return <ScrollView>
      <View style={styles.newsinfo_box}>
      <View>
        <Text style={styles.ni_title}>{this.state.newsinfo.title}</Text>
        <Text>点击量：{this.state.newsinfo.click}</Text>
        <Text>发表时间：{this.state.newsinfo.add_time}</Text>
        <View style={{borderColor:'#ccc', borderWidth:1}}></View>
      </View>
      <View>
        <Text>{this.state.newsinfo.content}</Text>
      </View>
    </View>
    </ScrollView>
  }

  getNewsInfo=(id)=>{
    var url = `http://www.xyfight.com/api/getnew/?id=${id}`;
    fetch(url)
      .then(res=>res.json())
      .then(mydata=>{
        this.setState({
          newsinfo: mydata.message[0]
        })
      })
  }

}

const styles = StyleSheet.create({
  newsinfo_box:{
    padding:10
  },
  ni_title:{
    color:'red',
    fontSize:22,
    alignItems:'center',
    padding:10,
  }
})